<template>
	<view class="content">
		<view class="total">
			<view class="weight">
				<view class="">
					<view class="num">
						{{garbageStatistical.throwCount}}
					</view>
					<view class="txt">
						分类次数(次)
					</view>
				</view>

				<view class="line">

				</view>
			</view>
			<view class="weight">
				<view class="">
					<view class="num">
						{{garbageStatistical.recoverNum == null? 0 : garbageStatistical.recoverNum }}
					</view>
					<view class="txt">
						投递重量(公斤)
					</view>
				</view>
				<view class="line">

				</view>
			</view>
			<view class="weight1">
				<view class="">
					<view class="num">
						{{garbageStatistical.integral == null ? 0 : garbageStatistical.integral}}
					</view>
					<view class="txt">
						分类积分
					</view>
				</view>

			</view>
		</view>
		<view class="" v-for="(item,index) in garbagePageData" :key="item.index">
			<view class="con">
				<view class="con-box1">
					<view class="box1">
						<view class="flx">
							<img src="../../static/images/ellipse.png" alt="" srcset="">
							<view class="txt">
								{{item.typeName}}[{{item.recoverNum}}公斤]
							</view>
						</view>

						<view class="score">
							{{item.integral}}
						</view>
					</view>
					<view class="time">
						{{item.submitTime}}
					</view>
				</view>

			</view>
		</view>
		<u-loadmore :status="status" :iconSize="17" />
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				// classificationData:[
				// 	{}
				// ]
				data: [],
				page: 1,
				limit: 10,
				garbagePageData: [],
				garbageStatistical: {},
				//需要加载的数据必须要触碰到每一页的底部才会加载数据
				status: 'loadmore',
				suo: true,
			}
		},
		methods: {
			getGarbagePageData() {
				let that = this

				request.get('/api/garbage/page', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data, '2222211111111111111')
						// this.billData = res.data.list
						this.garbagePageData = res.data.list
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 10) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 10) {
							this.status = 'loadmore';
							this.suo = true
						}
					}
				})
			},
			//上拉加载
			getPullGarbagePageData() {
				let that = this
				request.get('/api/garbage/page', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data, '2222211111111111111')
						// this.billData = res.data.list
						this.garbagePageData = this.garbagePageData.concat(res.data.list)
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 10) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 10) {
							this.status = 'loadmore';
							this.suo = true
						}
					}
				})
			},
			getStatisticalData() {
				let that = this

				request.get('/api/garbage/statistical', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {

						// this.billData = res.data.list
						this.garbageStatistical = res.data
						console.log(res.data, '6666666666666')
					}
				})
			},
		},
		onShow() {
			this.getGarbagePageData()
			this.getStatisticalData()

		},
		onReachBottom() {
			if (this.suo) { //定义个小锁，当没有数据时锁住suo
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.getPullGarbagePageData()
				}, 1000)
				return;
			}
		},
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		padding: 24rpx;
		background: #F1F4F9;

		.total {
			padding: 59rpx 20rpx 51rpx 20rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			margin-bottom: 24rpx;
			border-radius: 15rpx;

			.weight {
				display: flex;
				justify-content: space-between;
			}

			.num {
				padding-bottom: 35rpx;
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 40rpx;
				color: var(--global-bg-color);
				opacity: 0.85;
				// padding-right: 102rpx;
			}

			.txt {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				opacity: 0.85;
			}

			.line {
				width: 2rpx;
				height: 80rpx;
				background: #EBEBEB;
				margin-left: 59rpx;
			}
		}

		.con {
			padding: 35rpx 20rpx 20rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;

			.con-box1 {
				.box1 {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.flx {
						display: flex;
						align-items: center;

						img {
							width: 24rpx;
							height: 24rpx;
							padding-right: 15rpx;
						}

						.txt {

							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 36rpx;
							color: #000000;

							opacity: 0.85;
						}

						.score {

							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 36rpx;
							color: #000000;

							opacity: 0.85;
						}
					}

				}

				.time {

					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #000000;

					opacity: 0.45;
					padding-left: 39rpx;
				}
			}
		}
	}
</style>